<template>
	<view class="root">
		<view :style="{ margin: `48rpx 20rpx 20rpx` }" class="br-20 oh">
			<view class="fd-row">
				<label
					v-for="(tab, index) in tabs"
					:key="index"
					:class="[
						tabIndex === index ? 'bgc-f45455' : 'bgc-d9d9d9',
						'f1 jc-center lh-80 color-fff fs-30',
					]"
					@click="switchTab(index)"
				>
					{{ tab }}
				</label>
			</view>

			<view class="bgc-fff">
				<view v-if="tabIndex === 0" class="mt-30 ml-30 mr-30">
					<view v-if="orderInfo.store_address" class="fd-row mb-24">
						<label class="fs-24 bgc-4a7cee color-fff br-8 height-44 pl-10 pr-10">
							商家
						</label>
						<text class="f1 color-333 fs-32 lh-44 ml-28">
							{{
								`${orderInfo.store_address.address} ${orderInfo.store_address.name}`
							}}
						</text>
					</view>
					<label class="fs-28 height-60">
						<text class="color-999 mr-12">商家电话：</text>
						<text class="color-333">{{ orderInfo.storePhone }}</text>
					</label>
					<label class="fs-28 height-60">
						<text class="color-999 mr-12">预留电话：</text>
						<input
							class="fs-28"
							type="number"
							maxlength="11"
							placeholder="请输入你的预留电话"
							placeholder-style="color: #d9d9d9"
							v-model="phoneNumber"
						/>
					</label>
					<view class="fd-row ai-center fs-28 height-60">
						<text class="color-999 mr-12">自提时间：</text>
						<picker
							mode="date"
							:start="formatDate('Y-M-D')"
							:value="date"
							class="mr-30"
							@change="changePicker($event, 'date')"
						>
							<label>
								<text class="color-4a7cee">{{ date }}</text>
								<uni-icons
									class="ml-12"
									type="arrowdown"
									size="12"
									color="#d9d9d9"
								/>
							</label>
						</picker>
						<picker
							mode="time"
							:start="formatDate('h:m')"
							:value="time"
							class="mr-30"
							@change="changePicker($event, 'time')"
						>
							<label>
								<text class="color-4a7cee">{{ time }}</text>
								<uni-icons
									class="ml-12"
									type="arrowdown"
									size="12"
									color="#d9d9d9"
								/>
							</label>
						</picker>
					</view>
				</view>
				<view v-if="tabIndex === 1" class="mt-30 ml-30 mr-30" @click="chooseAddress">
					<block v-if="orderInfo.address">
						<label class="ai-start">
							<text class="f1 fs-32 color-333 fw-600">
								{{
									`${orderInfo.address.provinceName} ${orderInfo.address.cityName} ${orderInfo.address.countyName} ${orderInfo.address.detailInfo}`
								}}
							</text>
							<uni-icons class="ml-30" type="arrowright" />
						</label>
						<text class="mt-18 color-999 fs-28">
							{{ orderInfo.address.userName }} {{ orderInfo.address.telNumber }}
						</text>
					</block>

					<label v-else>
						<text class="fs-32 color-333 f1 text-center">选择收货地址</text>
						<uni-icons class="ml-30" type="arrowright" />
					</label>
				</view>

				<text class="color-fe0b0b fs-24 text-center mt-30 mb-30">
					温馨提示：在线下单前请务必电话联系商家，是否能及时配送！
				</text>
			</view>
		</view>

		<view :style="{ margin: `20rpx`, padding: `40rpx 20rpx 20rpx` }" class="bgc-fff br-20">
			<view v-for="(commodity, index) in orderInfo.list" :key="index" class="fd-row mb-20">
				<image
					:style="{ width: `130rpx`, height: `130rpx` }"
					class="bgc-eee br-12"
					:src="commodity.cover_image"
					mode="aspectFill"
				/>
				<view class="ml-28 jc-sa f1">
					<text class="fs-30 color-333">{{ commodity.name }}</text>
					<label class="jc-sb">
						<text class="color-999 fs-28">x{{ commodity.num }}</text>
						<text class="fw-600">
							<text class="color-333 fs-30">实付：</text>
							<text class="color-fa0707 fs-32">
								￥{{ commodity.price.toFixed(2) }}
							</text>
						</text>
					</label>
				</view>
			</view>

			<view class="mt-20 pt-20" :style="{ borderTop: `1rpx solid #f7f7f7` }">
				<label
					v-for="(option, optionIndex) in orderInfo.options"
					:key="optionIndex"
					class="lh-2 fs-28 jc-sb"
				>
					<text class="color-999">{{ option.title }}</text>
					<text class="color-333">{{ option.value }}</text>
				</label>
			</view>
		</view>

		<view
			class="bgc-fff ai-center fd-row safe-area-inset-bottom content-box jc-center fixed bottom-0 width-100percent"
			:style="{ height: `120rpx` }"
		>
			<view class="f1 ml-30 fd-row">
				<text class="color-333 fs-32 fw-600 lh-60">合计：</text>
				<view class="jc-center ai-center">
					<text class="color-fe0b0b fs-40 fw-600 lh-60">
						￥{{ orderInfo.all_price.toFixed(2) }}
					</text>
					<text class="fs-24">
						<text class="color-999">共</text>
						<text class="color-fe0b0b">{{ orderInfo.num }}</text>
						<text class="color-999">件商品</text>
					</text>
				</view>
			</view>

			<button
				class="bgc-f45455 border-none color-fff fs-32 fw-600 br-40 mr-20 lh-2"
				:plain="true"
				hover-class="tap-hover"
				@click="submit"
			>
				提交订单
			</button>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { sleep, formatDate } from "@/static/libs/utils";

	@Component
	export default class ConfirmOrder extends Vue {
		// component property
		orderInfo: AnyObject = {
			address: null,
			list: [],
			all_price: 0,
			num: 0,
		};
		tabs: string[] = ["到店自取", "快递配送"];
		tabIndex: number = 1;
		phoneNumber: string = "";
		formatDate: AnyFunction = formatDate;
		date: string = formatDate("Y-M-D");
		time: string = formatDate("h:m");

		onLoad() {
			uni.showLoading({ title: "Loading..." });
			this.$request.get("/shop/confirmOrder").then(({ data }) => {
				this.orderInfo = data;
				uni.hideLoading();
			});
		}

		switchTab(index: number) {
			if (this.tabIndex === index) return;
			this.tabIndex = index;
		}

		chooseAddress() {
			uni.chooseAddress({
				success: (res) => (this.orderInfo.address = res),
			});
		}
		changePicker({ detail }: AnyObject, type: string) {
			this[<"date" | "time">type] = detail.value;
		}

		async submit() {
			const { address } = this.orderInfo,
				params: AnyObject = { type: this.tabIndex };
				
			switch (this.tabIndex) {
				case 0:
					if (!this.phoneNumber) {
						uni.showToast({ title: "请输入预留电话", icon: "none" });
						return;
					}
					params.phoneNumber = this.phoneNumber;
					params.date = this.date;
					params.time = this.time;
					break;
				case 1:
					if (!address) {
						uni.showToast({ title: "请选择收货地址", icon: "none" });
						return;
					}
					params.address = JSON.stringify(address);
					break;
				default:
					break;
			}

			const [showFail, showRes]: any = await uni.showActionSheet({
				itemList: ["微信支付", "余额支付"],
			});

			if (showFail) return;
			params.payment_method = showRes.tapIndex;

			this.$request
				.post("/shop/addOrder", params)
				.then(async ({ data, msg: title }) => {
					if (!params.payment_method) {
						const [payFail, payRes]: any = await uni.requestPayment({
							provider: "wxpay",
							...data,
						});

						if (payFail) {
							uni.showToast({ title: "支付失败", icon: "none" });
							return;
						}
					}

					await uni.showToast({ title, mask: true, duration: 1000 });
					await sleep(1);

					uni.redirectTo({ url: "/pages/client/Order" });
				})
				.catch(async ({ code, msg: content }) => {
					if (code === 2) {
						const [showFail, showRes]: any = await uni.showModal({
							title: "提示",
							content,
							confirmText: "去充值",
						});
						if (showFail) return;
						showRes.confirm && uni.navigateTo({ url: "/pages/client/StoreCard" });
					}
				});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>